<template>
  <div class="video-player">
    <div class="content" >
      <!-- <video-player  class="vjs-custom-skin" style="width:100% !important;"
        ref="videoPlayer" 
        :playsinline="true" 
        :options="playerOptions"
      ></video-player> -->
      <video class="player-box" controls id="video" >
        <source :src="playerOptions.sources[0].src" type="video/mp4">
        <source :src="playerOptions.sources[0].src" type="video/ogg">
        <source :src="playerOptions.sources[0].src" type="video/webm">
      </video>
    </div>
    <div class="list" >
      <div class="list-head"><span class="kl-mar-r10">更多视频展示</span> <i class="el-icon-s-home"></i></div>
      <div class="list-body qy-scroll-y" >
        <div v-for="(item,index) in listData" :key="index" class="list-body-card" @click="playVideo(item.url)" >
          <div><img :src="item.cover"></div>
          <div class="list-body-card-title qy-font-limits" >{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/server/http'
import Api from '@/server/api'
// 引入videoplayer播放器（vue3中暂时无法使用，报错）
// import { VideoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
export default{
    name:'worksVideoPlayer',
    // components:{
    //   VideoPlayer
    // },
    data(){
        return{
          playerOptions : {
              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
              autoplay: false, //如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources: [{
                type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "" //url地址
              }],
              poster: "", //你的封面地址
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
              }
          },
          listData:[]
        }
    },
    methods:{
     initData(){
      Request.requestPost('', Api.apiPersonSpace.videoList)
        .then((res) => {
            console.log(res)
            this.listData = res.data.data
        })
        .catch((err) => {
            console.log(err);
        });
     },
     playVideo(playUrl){
      const player = document.querySelector('#video') 
      player.src = playUrl
      player.play()
     }
    },
    created(){
      this.initData()
      this.playerOptions.sources[0].src = decodeURI(this.$route.query.src) 
    }
}
</script>

<style scoped lang="scss">
video{
  border: none;
  outline-style: none;
}
.video-player{
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(180deg,#cccccc,#333333);
}
.content{
  width:80vw;
  height: 45vw;
  display: flex;
  align-items: center;
  justify-content: center;
  .player-box{
    width: 100%;
    height: 100%;
    background-color: black;
  }
}
.list{
  height: 45vw;
  width: 15vw;
  background-color: #333333;
  .list-head{
    height: auto;
    color: white;
    font-size: 18px;
    padding: 20px 0;
  }
  .list-body{
    height: 40vw;
    display: flex;
    flex-direction: column;
    .list-body-card{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      color: white;
      margin: 10px 0;
      cursor: pointer;
      .list-body-card-title{
        width: 100px;
      }
      img{
        width: 100px;
        height: 60px;
        object-fit: cover;
      }
    }
    .list-body-card:hover{
      color: #cccccc;
    }
  }
}
</style>
